<template>
	<view>
		<view class="inv-h-ws">
			<view style="display: flex;align-items: center;">
				<view @click="goReturn()">
					<u-icon name="arrow-left" color="#fff" size="40"></u-icon>
				</view>				
			</view>
			<view class="alist" style="">
				<view :class="['inv-hs',Inv==0?'inv-h-ses':'']" @click="Inv=0">
					<view class="tab-cen">
						<view>商家图册</view>
					</view>
				</view>
				<view :class="['inv-hs',Inv==1?'inv-h-ses':'']" @click="Inv=1">
					<view class="tab-cen">
						<view>职业资格</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 商家图册 -->
		<view class="" v-show="Inv == 0">
			<view class="content">
				<view class="risk-tab-top">
					<view class="risk-tab-cont" @click="tabChange(index)" v-for="(item,index) in tabList " :class="[activeIndex == index?'risk-active':'']"
					 :key="index">{{item}}</view>

				</view>
				<view class="risk-cont">
					<view v-show="activeIndex == 0">
						<view class="comment-cen">
							<view v-for="(item,index) in tab_list" :key='index' :class="{items:true,items_active:tab_index==index}" @click="tabs1(index)">{{item}}</view>

						</view>
						<view v-show="tab_index == 0">
							<view class="whole">
								<view>外观 12张图片</view>
								<view class="wholelist">
									<view class="list-img" v-for="(item,index) in 6"></view>
								</view>
							</view>
							<view class="whole">
								<view>工作区 12张图片</view>
								<view class="wholelist">
									<view class="list-img" v-for="(item,index) in 6"></view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="activeIndex == 1">22222222</view>
					<view v-show="activeIndex == 2">333333333</view>
				</view>


			</view>

		</view>
		
		<!-- 职业资格 -->
		<view class="" v-show="Inv == 1">
			<view class="risk-tab-top risks">
				<view class="risk-tab-cont" @click="tab(index)" v-for="(item,index) in Practice " :class="[active == index?'risk':'']"
				 :key="index">{{item}}</view>
			
			</view>
			<view v-show="active == 0">
				<view class="mei">
					<view class="mei-text">美发师执业技能证书</view>
					<view class="mei-img">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Inv: 0,
				tab_index:0,
				tabList: ['商家图册', '商家视频'],
				Practice:['设计师执照','商家经营执照'],
				activeIndex: 0,
				active:0,
				count: 5,
				value: 5,
				tab_list:['全部123','外观12','工作区30','休息区30','房间30']


			}
		},
		methods: {
			tabs1(index) {
				this.tab_index = index
			},
			goReturn() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabChange(val) {
				this.activeIndex = val;
				console.log(val);
			},
			tab(val){
				this.active = val;
			},
			changeTab(Inv) {
				that.navIdx = Inv;
			},

		}
	}
</script>

<style lang="scss">
	.mei{
		padding: 20rpx;
		border-bottom:8rpx solid #F3F3F3;
		
		.mei-text{			
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #282828;
		}
		.mei-img{
			width: 100%;
			height:420rpx;
			
			
		}
	}
	.inv-h-ws {
		padding: 70rpx 0 20rpx 20rpx;
		background-color: #00c6c2;
		display: flex;
		align-items: center;
		

		.tab-cen {			
			padding: 3px 30rpx;
		}
		.alist{
			padding:0 107rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.inv-hs {	
		font-size: 34rpx;
		color: #fff;
	}



	.inv-h-ses {
		font-size: 34rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #333;
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #fff;
		
	}
	.risks{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333;
		display: flex;
		padding: 20rpx 300rpx 5rpx 20rpx;
		position: relative;
		justify-content: space-between;
		border-bottom: 1rpx solid #F1F1F1;
	}
	.risk-tab-top {

		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333;
		display: flex;
		padding: 20rpx 310rpx 5rpx 20rpx;
		position: relative;
		justify-content: space-between;
		border-bottom: 1rpx solid #F1F1F1;

		.risk-tab-cont {
			padding: 10rpx 10rpx;
			font-size: 30rpx;
			color: #333;
			font-family: PingFang;
			font-weight: 500;

		}
		.risk{
			color: #00c6c2;
			border-bottom: 1rpx solid #00C5C1;
		}
		.risk-active {
			color: #00c6c2;
			border-bottom: 1rpx solid #00C5C1;
		}
	}

	.comment-cen {
		padding: 20rpx 20rpx 20rpx 20rpx;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.items{
			padding: 5rpx 15rpx;
			background-color: #EAEAEA;
			color: #282828;
			border-radius: 50rpx;		
			font-size: 20rpx;
			font-family: PingFang;
			font-weight: 500;
			
		}
		
		.items_active{
			background-color: #00c6c2;			
			font-size: 20rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.whole{
		padding: 30rpx;
		border-top: 8rpx solid #F0F0F0;
		
		.wholelist{
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			.list-img{
				width: 49%;
				height:265rpx;
				margin-bottom: 10rpx;
				background-color: #00C5C1;
			}
		}
	}
</style>
